<template>
  <div id="allmap">
    <div id="map"></div>
    <!-- 人员图例 -->
    <div class="person_legend">
      <h3>图 例</h3>
      <p>
        <span class="group">
          <img :src="legend.teamLeader" alt />
        </span>
        <span>班组长</span>
      </p>
      <p>
        <span class="clear">
          <img :src="legend.workers" alt />
        </span>
        <span>环卫工</span>
      </p>
    </div>
    <!-- 状态图例 -->
    <div class="status_legend">
      <span>状态</span>
      <span class="public online"></span>
      <span>在线({{status.onlines}})</span>
      <span class="public outline"></span>
      <span>离线({{status.outlines}})</span>
      <span class="public warning"></span>
      <span>报警({{warningNum}})</span>
    </div>
  </div>
</template>

<script>
import teamLeaderOnline from '@/assets/team-Leader-online.png'
import teamLeaderOutline from '@/assets/team-Leader-outline.png'
import workersOnline from '@/assets/workers-online.png'
import workersOutline from '@/assets/workers-outline.png'
import warningMark from '@/assets/warning-mark.png'
import eventBus from '@/eventBus.js'

export default {
  data () {
    return {
      map: null,
      // 班组区域
      groupPolygon: null,
      cleanerPolygon: null,
      status: {},
      legend: {
        teamLeader: teamLeaderOnline,
        workers: workersOnline
      },
      warningNum: 0
    }
  },
  created () {
    // 在线离线人数
    eventBus.$on('mapData1', val => {
      this.status = val
    })
    // 报警数量
    eventBus.$on('warningNum', val => {
      this.warningNum = val
    })
  },
  mounted () {
    // 显示地图
    this.mapShow()
    // 显示人员标记点
    this.showPoint()
    // 双击人员列表某一行，显示标记点，信息窗体
    eventBus.$on('mapLocaltion', val => {
      this.dbClick(val)
    })
    // 双击报警列表某一行
    eventBus.$on('warningItem', val => {
      this.dbClickWarning(val)
    })
    // 显示班组区域
    eventBus.$on('showGroupArea', message => {
      // 创建多边形
      this.getGroupArea(message)
    })
    // 清扫队区域
    eventBus.$on('showClearArea', message => {
      // 创建多边形
      this.getClearArea(message)
    })
    // 清除区域
    eventBus.$on('clearArea', () => {
      this.map.clearOverlays()
    })
    // 开始跟踪
    eventBus.$on('Tracking', val => {
      this.dbClick(val)
    })
    // 自动刷新
    eventBus.$on('mapData2', message => {
      this.showPoint()
    })
  },
  methods: {
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = new BMap.Map('map')// 创建Map实例
      this.map.centerAndZoom(new BMap.Point(117.2, 39.15), 12.9)// 初始化地图,设置中心点坐标和地图级别
      // this.map.setCurrentCity('大厂县')// 设置地图显示的城市 此项是必须设置的
      this.map.centerAndZoom("大厂县",13);
      this.map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
      // 添加缩放控件
      const top_left_navigation = new BMap.NavigationControl()
      this.map.addControl(top_left_navigation)
      //添加地图类型控件
      this.map.addControl(new BMap.MapTypeControl({
        mapTypes: [
          BMAP_NORMAL_MAP,
          BMAP_HYBRID_MAP
        ]
      }))
    },
    // 显示标记点
    async showPoint () {
      let { data } = await this.$Http.get(`/DataListCompany/GetCleanerAllListApi?ClientNo=${this.$route.query.ClientNo}`)
      data = data.map(item => {
        if (item.WORKTYPE === '班组长') {
          if (item.ONLINE === 1) item.ICONURL = teamLeaderOnline
          if (item.ONLINE === 0) item.ICONURL = teamLeaderOutline
        }
        if (item.WORKTYPE === '环卫工') {
          if (item.ONLINE === 1) item.ICONURL = workersOnline
          if (item.ONLINE === 0) item.ICONURL = workersOutline
        }
        return item
      })
      data.forEach(item => {
        this.createMarker(item.LONGITUDE, item.LATITUDE, item.ICONURL)
      })
    },
    // 创建标记点
    createMarker (lng, lat, iconURL) {
      const pt = new BMap.Point(lng, lat)
      const myIcon = new BMap.Icon(iconURL, new BMap.Size(30, 30))
      const marker2 = new BMap.Marker(pt, { icon: myIcon })// 创建标注
      this.map.addOverlay(marker2)// 将标注添加到地图中
    },
    // 班组区域
    async getGroupArea (ClientNo) {
      const { data } = await this.$Http.get(`/DataListCompany/GetTeamAreaApi?ClientNo=${ClientNo}`)
      let ary = []
      let x = 0
      let y = 0
      data.forEach(element => {
        ary.push({ lng: element.LONGITUDE, lat: element.LATITUDE })
        x += element.LONGITUDE
        y += element.LATITUDE
      })
      x = x / data.length
      y = y / data.length
      // 地图居中
      this.map.centerAndZoom(new BMap.Point(x, y), 13)// 初始化地图,设置中心点坐标和地图级别

      this.groupPolygon = new BMap.Polygon(ary, { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 }) //创建多边形
      this.map.addOverlay(this.groupPolygon) //增加多边形
    },
    // 清扫队区域
    async getClearArea (ClientNo) {
      const { data } = await this.$Http.get(`/DataListCompany/GetCleanTeamAreaApi?ClientNo=${ClientNo}`)
      let ary = []
      let x = 0
      let y = 0
      data.forEach(element => {
        ary.push({ lng: element.LONGITUDE, lat: element.LATITUDE })
        x += element.LONGITUDE
        y += element.LATITUDE
      })
      x = x / data.length
      y = y / data.length
      // 地图居中
      this.map.centerAndZoom(new BMap.Point(x, y), 13)// 初始化地图,设置中心点坐标和地图级别

      this.cleanerPolygon = new BMap.Polygon(ary, { strokeColor: 'red', strokeWeight: 2, strokeOpacity: 0.5 }) //创建多边形
      this.map.addOverlay(this.cleanerPolygon) //增加多边形
    },
    // 双击人员列表
    dbClick (val) {
      // 标记点地图居中
      this.map.centerAndZoom(new BMap.Point(val.LONGITUDE, val.LATITUDE), 13)
      // 信息窗体
      const opts = {
        width: 200,     // 信息窗口宽度
        height: 110,     // 信息窗口高度
        title: val.NAME, // 信息窗口标题
      }
      const str = `<p style="margin-bottom: 5px;">姓名：${val.NAME}</p>
                   <p style="margin-bottom: 5px;">班组：${val.CLIENT_NAME}</p>
                   <p style="margin-bottom: 5px;">经度：${val.LONGITUDE}</p>
                   <p style="margin-bottom: 5px;">纬度：${val.LATITUDE}</p>
                  `
      const infoWindow = new BMap.InfoWindow(str, opts)  // 创建信息窗口对象 
      const point = new BMap.Point(val.LONGITUDE, val.LATITUDE)//信息窗体坐标
      this.map.openInfoWindow(infoWindow, point) //开启信息窗口
    },
    // 双击报警列表
    dbClickWarning (val) {
      // 标记点地图居中
      this.map.centerAndZoom(new BMap.Point(val.LONGITUDE, val.LATITUDE), 13)
      // 信息窗体
      const opts = {
        width: 200,     // 信息窗口宽度
        height: 60,     // 信息窗口高度
        title: val.NAME, // 信息窗口标题
      }
      const str = `<p style="margin-bottom: 5px;">报警类型：${val.ALARM_TYPE}</p>
                   <p style="margin-bottom: 5px;">报警时间：${val.ALARM_DATE}</p>
                  `
      const infoWindow = new BMap.InfoWindow(str, opts)  // 创建信息窗口对象 
      const point = new BMap.Point(val.LONGITUDE, val.LATITUDE)//信息窗体坐标
      this.map.openInfoWindow(infoWindow, point) //开启信息窗口
    }
  }
}
</script>

<style scoped lang="less">
#allmap {
  position: relative;
  height: calc(100% - 30px);
}
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
#map {
  height: 100%;
}
.person_legend {
  width: 100px;
  height: 110px;
  position: absolute;
  right: 10px;
  bottom: 40px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
  }
  p {
    height: 30px;
    text-align: center;
    color: #333;
    &:nth-child(2) {
      margin-bottom: 10px;
    }
    span:first-child {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 5px;
      vertical-align: middle;
      img {
        background-size: 30px 30px;
      }
    }
  }
}
.status_legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0 10px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  .public {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    margin-right: 2px;
  }
  .online {
    background-color: #1afa29;
  }
  .outline {
    background-color: blue;
  }
  .warning {
    background-color: red;
  }
}
</style>
